$(function () {

    // 浏览器检测开关
    var enable = false;
    // 用户是否登录引导过
    //初次登录引导
    var isGuide = false;
    var _guideStatus = $('#guideStatus');
    var guideStatus = $(_guideStatus).val();
    if(guideStatus == 0){
        isGuide = false;
    }
    if (first()) {
        detection();
    } else {
        if (browser()) {
            complete();
        } else {
            if(!isGuide){
                $('#guide').click();
            }
        }
    }

    function first() {
        var detection = getCookie('BROWSER_DETECTION');
        return 1 != detection;
    }

    function browser() {
        var ua = navigator.userAgent.toLowerCase();
        var ie = ua.indexOf('msie') != -1;
        return ie && ua.match(/msie ([\d.]+)/)[1] <= 8.0;
    }

    function detection() {

        if (!enable) return;
        $('div.detection, div.detecting').removeClass('hide');
        progress();
    }

    function progress() {
        var canvas = document.getElementById('detecting'),  //获取canvas元素
            context = canvas.getContext('2d'),  //获取画图环境，指明为2d
            centerX = canvas.width / 2,   //Canvas中心点x轴坐标
            centerY = canvas.height / 2,  //Canvas中心点y轴坐标
            rad = Math.PI * 2 / 100, //将360度分成100份，那么每一份就是rad度
            speed = 0; //加载的快慢就靠它了
        var element = document.getElementById('progress');

        //绘制5像素宽的运动外圈
        function blueCircle(n) {
            context.save();
            context.beginPath();
            context.arc(centerX, centerY, 100, -Math.PI / 2, -Math.PI / 2 + n * rad, false);
            context.lineWidth = 1; //设置线宽
            context.strokeStyle = "#17d6b0";
            context.lineCap = "round";
            context.stroke();
            context.closePath();
            context.restore();
        }

        //绘制白色外圈
        function whiteCircle() {
            context.save();
            context.beginPath();
            context.arc(centerX, centerY, 90, 0, Math.PI * 2, false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
            context.fillStyle = "#17d6b0";
            context.fill();
            context.closePath();
            context.restore();
        }

        //百分比文字绘制
        function text(n) {
            context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
            context.fillStyle = '#fff';
            var font_size = 52;
            context.font = font_size + "px Helvetica";
            var text_width = context.measureText(n.toFixed(0)).width;
            context.fillText(n.toFixed(0), centerX - text_width / 1.5, centerY + font_size / 3);
            context.restore();
        }

        function drawFrame() {
            if (!window.requestAnimationFrame) {
                var lastTime = 0;
                window.requestAnimationFrame = function (callback) {
                    var currTime = new Date().getTime();
                    var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
                    var id = window.setTimeout(function () {
                        callback(currTime + timeToCall);
                    }, timeToCall);
                    lastTime = currTime + timeToCall;
                    return id;
                }
            }
            if (!window.cancelAnimationFrame) {
                window.cancelAnimationFrame = function (id) {
                    clearTimeout(id);
                    complete();
                };
            }

            var id = requestAnimationFrame(drawFrame);
            context.clearRect(0, 0, canvas.width, canvas.height);
            whiteCircle();
            text(speed);
            blueCircle(speed);
            element.style.width = speed*2.2 + '%';
            if (speed > 100) {
                complete();
                cancelAnimationFrame(id);
                return;
            }
            speed += 0.75;
        }

        drawFrame();
    }

    function complete() {

        var element = document.getElementById('progress');
        element.style.width = 0 + '%';

        $('div.detecting').addClass('hide');
        $('div.detection, div.detection-completion').removeClass('hide');

        var canvas1 = document.getElementById('completion'),  //获取canvas元素
            context = canvas1.getContext('2d'),  //获取画图环境，指明为2d
            centerX = canvas1.width / 2,   //Canvas中心点x轴坐标
            centerY = canvas1.height / 2,  //Canvas中心点y轴坐标
            rad = Math.PI * 2 / 100; //将360度分成100份，那么每一份就是rad度

        //绘制5像素宽的运动外圈
        function blueCircle(n) {
            context.save();
            context.beginPath();
            context.arc(centerX, centerY, 100, -Math.PI / 2, -Math.PI / 2 + n * rad, false);
            context.lineWidth = 1; //设置线宽
            context.strokeStyle = "#17d6b0";
            context.lineCap = "round";
            context.stroke();
            context.closePath();
            context.restore();
        }

        //绘制白色外圈
        function whiteCircle() {
            context.save();
            context.beginPath();
            context.arc(centerX, centerY, 90, 0, Math.PI * 2, false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
            context.fillStyle = "#17d6b0";
            context.fill();
            context.closePath();
            context.restore();
        }

        //动画循环
        context.clearRect(0, 0, canvas1.width, canvas1.height);
        whiteCircle();
        blueCircle(100);
        if (browser()) {
            $('*[data-error]').removeClass('hide');
            $('*[data-success]').addClass('hide');
        } else {
            $('*[data-error]').addClass('hide');
            $('*[data-success]').removeClass('hide');
        }

        function version() {
            var agent = navigator.userAgent.toLowerCase();
            var info = name();
            var result;
            if (info.qq || info.uc || info.lb || info.opera || info.qihu || info.edge) {
                result = /(qqbrowser|ucbroswer|lbbrowser|opr|360se|edge).*?[\d.]+/.exec(agent);
            } else if (info.sogou) {
                result = /(se).*?[\d.]+/.exec(agent);
            } else if (info.ie) {
                result = /(msie|rv).*?[\d.]+/.exec(agent);
            } else if (info.chrome) {
                result = /(chrome).*?[\d.]+/.exec(agent);
            } else if (info.firefox || info.safari) {
                result = /(firefox|safari|version).*?[\d.]+/.exec(agent);
            } else {
                return '未知';
            }
            result = /[\d.]+/.exec(result);
            if (result && result.length > 0) {
                return result[0];
            } else {
                return '未知';
            }
        }

        function name() {
            var name = {
                'qq': false,
                'uc': false,
                'lb': false,
                'opera': false,
                'qihu': false,
                'sogou': false,
                'ie': false,
                'edge': false,
                'firefox': false,
                'chrome': false,
                'safari': false,
                'name': '未知'
            };
            var ua = navigator.userAgent.toLowerCase();
            if (ua.contains('qqbrowser')) {
                name.qq = true;
                name.name = 'QQ浏览器';
            } else if (ua.contains('ucbrowser')) {
                name.uc = true;
                name.name = 'UC浏览器';
            } else if (ua.contains('lbbrowser')) {
                name.lb = true;
                name.name = '猎豹浏览器';
            } else if (ua.contains('opr')) {
                name.opera = true;
                name.name = 'Opera浏览器';
            } else if (ua.contains('360se') && ua.contains('qihu')) {
                name.qihu = true;
                name.name = '360浏览器';
            } else if (ua.contains('se') && ua.contains('MetaSr')) {
                name.sogou = true;
                name.name = '搜狗浏览器';
            } else if (ua.contains('msie') || ua.contains('trident')) {
                name.ie = true;
                name.name = 'Internet Explorer';
            } else if (ua.contains('edge')) {
                name.edge = true;
                name.name = 'Microsoft Edge';
            } else if (ua.contains('chrome')) {
                name.chrome = true;
                name.name = 'Google Chrome';
            } else if (ua.contains('safari')) {
                name.safari = true;
                name.name = 'Safari';
            } else if (ua.contains('firefox')) {
                name.firefox = true;
                name.name = 'Firefox';
            }
            return name;
        }
    }

    $('body')
        .on('click', '#detection-close', function () {
            /*$("div.detection,div.detection-completion").animate({
                left:'100%',
                opacity:'0',
                height:'0',
                width:'0'
            },1000);*/
            $('div.detection,div.detection-completion').addClass('active');
            $('div.detection-completion').addClass('hide');
            if (first()) {
                if(!isGuide){
                    setTimeout(function (){$('#guide').click();},1000);
                }
            }
            SetCookieOutTime('BROWSER_DETECTION', 1, 'd36600');
        })
        .on('click', '#detection', function () {
            $('div.detection,div.detection-completion').removeClass('active');
            detection();
        });
});

String.prototype.contains = function (s) {
    return this.indexOf(s) !== -1;
};